<template>
  <div class="container">
    <el-table id="student" :data="studentList" highlight-current-row style="width: 100%"  :header-cell-style="{background:'#EEF3FC',color:'#333333'}">
      <el-table-column
        label="序号"
        type="index"
        style="width: 5%"
        align="center">
      </el-table-column>
      <el-table-column   :min-width="50"  align="center" label="姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.name || '/'}}</span>
        </template>
      </el-table-column>
      <el-table-column  :min-width="50"  align="center" label="性别">
        <template slot-scope="scope">
          <span>{{ scope.row.sex || '/'}}</span>
        </template>
      </el-table-column>
      <el-table-column  :min-width="100"  align="center" label="身份证号">
        <template slot-scope="scope">
          <span>{{ scope.row.idCard || '/'}}</span>
        </template>
      </el-table-column>
      <el-table-column :min-width="50"  align="center" label="年龄">
        <template slot-scope="scope">
          <span>{{ scope.row.age || '/'}}</span>
        </template>
      </el-table-column>
      <el-table-column   align="center" label="班级编号">
        <template slot-scope="scope">
          <span>{{ scope.row.classId || '23454654654'}}</span>
        </template>
      </el-table-column>
      <el-table-column   align="center" label="课程">
        <template slot-scope="scope">
          <span>{{ scope.row.course || '/'}}</span>
        </template>
      </el-table-column>
      <el-table-column   align="center" label="课程费用">
        <template slot-scope="scope">
          <span>{{ scope.row.money || '/'}}</span>
        </template>
      </el-table-column>
      <el-table-column   align="center" label="班级名称">
        <template slot-scope="scope">
          <span>{{ scope.row.className || '/'}}</span>
        </template>
      </el-table-column>
      <el-table-column   align="center" label="开班时间">
        <template slot-scope="scope">
          <span>{{ scope.row.classTime || '/'}}</span>
        </template>
      </el-table-column>
      <el-table-column   align="center" label="提交时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime || '/'}}</span>
        </template>
      </el-table-column>

      <!--<el-table-column v-if="isShow !== 'D'" style="width: 12%" align="center" label="提交时间">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.tjsj }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column v-if="isShow !== 'D'" style="width: 12%" align="center" label="审批时间">-->
      <!--<template slot-scope="scope">-->
      <!--<span>{{ scope.row.spsj }}</span>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column style="width: 12%" align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="isShow === 'W'" type="text" @click="open">原因</el-button>
          <i v-if="isShow === 'W'">|</i>
          <el-button type="text"  @click="urlStudentDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {

    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    props: {
      type: {
        type: String,
        default: 'D'
      },
      studentList:{
        type:Array,
        return:{
          default:[]
        }
      },
      pageSizes:{
        type:Array
      },
      total:{
        type:Number
      },
      currentPage:{
        type:Number
      },
      pagesize:{
        type:Number
      }
    },
    watch: {
      studentList: {
        deep: true,
        immediate: true,
        handler(val) {
          this.studentList=val
          console.log('获取监听过来的学员信息数组11111',this.studentList.length)
        },
      },
    },
    data() {
      return {
        list: null,
        isShow:'D',
        listQuery: {
          page: 1,
          limit: 5,
          type: this.type,
          sort: '+id'
        },
      }
    },
    created() {
      console.log('需要渲染的过来学员信息页数',this.currentPage,this.pagesize,this.total)
      this.getList()
    },
    methods: {
          // 条数变化
      handleSizeChange(val) {
        console.log('学员条数变化',val,this.currentPage)
        let obj={
          currentPage: this.currentPage,
          pagesize:this.pagesize,
          total:this.total,
          val:val
        }
        this.$emit('handleSizeChange',obj)
      },
      // 换页
      handleCurrentChange(val) {
        console.log('学员页数变化',val)
        let obj={
          currentPage:this.currentPage,
          total:this.total,
          val:val
        }
        this.$emit('handleCurrentChange',obj)
      },
      // 学院统计详情跳转
      urlStudentDetail(data){
        this.$router.push({ name: 'student-particulars',  params: {id:this.isShow,item:data}})
      },
      getList() {
        this.loading = true
        this.isShow = this.listQuery.type

        this.list = [
          { class: '一年级',number:'0623',school:'北京星光小学', name: '徐小溢',sex:'男', age: '32',type:'数学',identity:'123456789876543215',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '五年级',number:'0623',school:'北京星光小学', name: '方子阳',sex:'男',  age: '32',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '一年级',number:'0623',school:'北京星光小学', name: '洛乡田',sex:'男',  age: '23',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '五年级',number:'0623',school:'北京星光小学', name: '李勇',sex:'男',  age: '22',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '五年级',number:'0623',school:'北京星光小学', name: '王伟',sex:'男',  age: '13',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '一年级',number:'0623',school:'北京星光小学', name: '徐小溢',sex:'男',  age: '11',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '五年级',number:'0623',school:'北京星光小学', name: '洛乡田',sex:'男',  age: '23',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '一年级',number:'0623',school:'北京星光小学', name: '李勇',sex:'男',  age: '22',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '五年级',number:'0623',school:'北京星光小学', name: '王伟',sex:'男',  age: '13',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '一年级',number:'0623',school:'北京星光小学', name: '徐小溢',sex:'男',  age: '11',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '五年级',number:'0623',school:'北京星光小学', name: '洛乡田',sex:'男',  age: '23',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '五年级',number:'0623',school:'北京星光小学', name: '王伟',sex:'男',  age: '21',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '五年级',number:'0623',school:'北京星光小学', name: '徐小溢',sex:'男',  age: '13',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' },
          { class: '一年级',number:'0623',school:'北京星光小学', name: '王伟',sex:'男',  age: '14',type:'数学',identity:'410924187348293402',tjsj:'12800',spr:'李七七',spsj:'2021-09-07 10:00' }
        ]
      },

      current_change:function(currentPage){
        this.currentPage = currentPage;
      },
    }
  }
</script>
<style scoped lang='scss'>
.container{
  // 设置表格的每一个表格的高度
  /deep/.el-table td, .el-table th{
    padding: 4px 0;
  }
}

</style>

